<template>
  <view class="depot-list-page">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-box" @click="handleSearch">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <text class="placeholder">搜索寄存点</text>
      </view>
      <view class="filter-btn" @click="showFilter = true">
        <uni-icons type="filter" size="20" color="#666"></uni-icons>
      </view>
    </view>
    
    <!-- 筛选条件 -->
    <view class="filter-tags" v-if="selectedFilters.length">
      <view 
        class="filter-tag" 
        v-for="(filter, index) in selectedFilters" 
        :key="index"
      >
        <text>{{filter.label}}</text>
        <uni-icons 
          type="close" 
          size="14" 
          color="#999"
          @click="removeFilter(filter)"
        ></uni-icons>
      </view>
    </view>
    
    <!-- 地图模式切换 -->
    <view class="view-toggle">
      <view 
        class="toggle-item" 
        :class="{active: viewMode === 'list'}"
        @click="viewMode = 'list'"
      >
        <uni-icons type="list" size="18"></uni-icons>
        <text>列表</text>
      </view>
      <view 
        class="toggle-item" 
        :class="{active: viewMode === 'map'}"
        @click="viewMode = 'map'"
      >
        <uni-icons type="map" size="18"></uni-icons>
        <text>地图</text>
      </view>
    </view>
    
    <!-- 列表模式 -->
    <view v-if="viewMode === 'list'">
      <view class="sort-bar">
        <view 
          class="sort-item" 
          v-for="(item, index) in sortOptions" 
          :key="index"
          :class="{active: sortType === item.value}"
          @click="sortType = item.value"
        >
          <text>{{item.label}}</text>
          <view class="sort-icon" v-if="sortType === item.value">
            <uni-icons 
              :type="sortOrder === 'asc' ? 'arrow-up' : 'arrow-down'" 
              size="12"
            ></uni-icons>
          </view>
        </view>
      </view>
      
      <scroll-view scroll-y class="list-container">
        <depot-card 
          v-for="(depot, index) in filteredDepots" 
          :key="index" 
          :depot="depot"
          @click="handleDepotClick(depot.id)"
        ></depot-card>
        
        <view class="load-more" v-if="hasMore">
          <text>加载中...</text>
        </view>
        <view class="no-more" v-else>
          <text>没有更多了</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 地图模式 -->
    <view v-else class="map-container">
      <map class="map" :latitude="location.latitude" :longitude="location.longitude">
        <!-- 地图标记点 -->
        <block v-for="(depot, index) in depots" :key="index">
          <marker 
            :id="depot.id" 
            :latitude="depot.location.latitude" 
            :longitude="depot.location.longitude"
            :iconPath="depot.available ? '/static/marker-active.png' : '/static/marker-inactive.png'"
            @click="handleMarkerClick(depot)"
          ></marker>
        </block>
      </map>
      <view class="map-bottom">
        <view class="map-info">
          <view class="map-depot-name">{{selectedDepot.name}}</view>
          <view class="map-depot-address">{{selectedDepot.address}}</view>
          <view class="map-depot-price">¥{{selectedDepot.price}}/小时起</view>
        </view>
        <view class="map-btn" @click="handleDepotClick(selectedDepot.id)">查看详情</view>
      </view>
    </view>
    
    <!-- 筛选面板 -->
    <uni-popup ref="filterPopup" type="bottom">
      <view class="filter-panel">
        <view class="panel-header">
          <text>筛选条件</text>
          <uni-icons type="close" size="20" @click="showFilter = false"></uni-icons>
        </view>
        
        <view class="filter-section">
          <text class="section-title">箱型</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(size, index) in sizeTypes" 
              :key="index"
              :class="{active: filters.sizeType.includes(size.value)}"
              @click="toggleSizeFilter(size.value)"
            >
              <text>{{size.label}}</text>
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <text class="section-title">服务</text>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(service, index) in services" 
              :key="index"
              :class="{active: filters.services.includes(service.value)}"
              @click="toggleServiceFilter(service.value)"
            >
              <text>{{service.label}}</text>
            </view>
          </view>
        </view>
        
        <view class="filter-section">
          <text class="section-title">价格区间</text>
          <view class="price-range">
            <input 
              type="number" 
              placeholder="最低价" 
              v-model="filters.minPrice"
              class="price-input"
            >
            <text class="price-separator">-</text>
            <input 
              type="number" 
              placeholder="最高价" 
              v-model="filters.maxPrice"
              class="price-input"
            >
          </view>
        </view>
        
        <view class="action-buttons">
          <view class="reset-btn" @click="resetFilters">重置</view>
          <view class="confirm-btn" @click="applyFilters">确定</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>

export default {
  data() {
    return {
      viewMode: 'list',
      sortType: 'distance',
      sortOrder: 'asc',
      showFilter: false,
      location: {
        latitude: 39.90403,
        longitude: 116.407526
      },
      selectedDepot: {
        id: 1,
        name: '市中心火车站寄存点',
        address: '火车站东广场B1层',
        price: 8,
        location: {
          latitude: 39.90403,
          longitude: 116.407526
        }
      },
      sortOptions: [
        { label: '距离', value: 'distance' },
        { label: '价格', value: 'price' },
        { label: '评分', value: 'rating' }
      ],
      sizeTypes: [
        { label: '小箱型', value: 'small' },
        { label: '中箱型', value: 'medium' },
        { label: '大箱型', value: 'large' }
      ],
      services: [
        { label: '24小时', value: '24h' },
        { label: '免费取送', value: 'delivery' },
        { label: '行李保险', value: 'insurance' }
      ],
      filters: {
        sizeType: [],
        services: [],
        minPrice: null,
        maxPrice: null
      },
      selectedFilters: [],
      depots: [
        // 站点数据
      ],
      page: 1,
      pageSize: 10,
      hasMore: true
    }
  },
  computed: {
    filteredDepots() {
      // 实际项目中应根据筛选条件过滤数据
      return this.depots
    }
  },
  methods: {
    handleSearch() {
      uni.navigateTo({
        url: '/pages/search'
      })
    },
    handleDepotClick(id) {
      uni.navigateTo({
        url: `/pages/depot/detail?id=${id}`
      })
    },
    handleMarkerClick(depot) {
      this.selectedDepot = depot
    },
    toggleSizeFilter(value) {
      const index = this.filters.sizeType.indexOf(value)
      if (index >= 0) {
        this.filters.sizeType.splice(index, 1)
      } else {
        this.filters.sizeType.push(value)
      }
    },
    toggleServiceFilter(value) {
      const index = this.filters.services.indexOf(value)
      if (index >= 0) {
        this.filters.services.splice(index, 1)
      } else {
        this.filters.services.push(value)
      }
    },
    applyFilters() {
      // 构建筛选条件显示
      this.selectedFilters = []
      
      if (this.filters.sizeType.length) {
        const labels = this.filters.sizeType.map(val => {
          return this.sizeTypes.find(s => s.value === val).label
        })
        this.selectedFilters.push({
          type: 'sizeType',
          label: `箱型: ${labels.join(',')}`
        })
      }
      
      if (this.filters.services.length) {
        const labels = this.filters.services.map(val => {
          return this.services.find(s => s.value === val).label
        })
        this.selectedFilters.push({
          type: 'services',
          label: `服务: ${labels.join(',')}`
        })
      }
      
      if (this.filters.minPrice || this.filters.maxPrice) {
        const min = this.filters.minPrice || '不限'
        const max = this.filters.maxPrice || '不限'
        this.selectedFilters.push({
          type: 'price',
          label: `价格: ${min}-${max}`
        })
      }
      
      this.showFilter = false
      this.page = 1
      this.loadDepots()
    },
    resetFilters() {
      this.filters = {
        sizeType: [],
        services: [],
        minPrice: null,
        maxPrice: null
      }
      this.selectedFilters = []
    },
    loadDepots() {
      // 实际项目调用API加载数据
    },
    removeFilter(filter) {
      if (filter.type === 'sizeType') {
        this.filters.sizeType = []
      } else if (filter.type === 'services') {
        this.filters.services = []
      } else if (filter.type === 'price') {
        this.filters.minPrice = null
        this.filters.maxPrice = null
      }
      
      this.selectedFilters = this.selectedFilters.filter(f => f.type !== filter.type)
      this.applyFilters()
    }
  },
  onLoad() {
    this.loadDepots()
  }
}
</script>

<style lang="scss">
$primary-color: #FF7F00;

.depot-list-page {
  padding-bottom: 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fff;
  
  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 8px 15px;
    margin-right: 10px;
    
    .placeholder {
      color: #999;
      margin-left: 8px;
    }
  }
  
  .filter-btn {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 15px 10px;
  
  .filter-tag {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 15px;
    padding: 4px 10px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    
    text {
      margin-right: 5px;
    }
  }
}

.view-toggle {
  display: flex;
  background: #fff;
  margin: 0 15px;
  border-radius: 8px;
  overflow: hidden;
  
  .toggle-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    font-size: 12px;
    color: #666;
    
    &.active {
      color: $primary-color;
      background: #FFF5EB;
    }
  }
}

.sort-bar {
  display: flex;
  background: #fff;
  margin: 10px 15px 0;
  border-radius: 8px;
  
  .sort-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    position: relative;
    
    &.active {
      color: $primary-color;
      font-weight: bold;
    }
    
    .sort-icon {
      margin-left: 4px;
    }
  }
}

.list-container {
  height: calc(100vh - 260px);
  padding: 0 15px;
}

.map-container {
  height: calc(100vh - 150px);
  position: relative;
  
  .map {
    width: 100%;
    height: 100%;
  }
  
  .map-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    display: flex;
    align-items: center;
    
    .map-info {
      flex: 1;
      
      .map-depot-name {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .map-depot-address {
        font-size: 13px;
        color: #666;
        margin-bottom: 5px;
      }
      
      .map-depot-price {
        color: $primary-color;
        font-weight: bold;
      }
    }
    
    .map-btn {
      width: 100px;
      height: 36px;
      background: $primary-color;
      border-radius: 18px;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  }
}

.filter-panel {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  
  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    font-weight: bold;
  }
  
  .filter-section {
    margin-top: 20px;
    
    .section-title {
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 12px;
      display: block;
    }
  }
  
  .filter-options {
    display: flex;
    flex-wrap: wrap;
    
    .filter-option {
      padding: 8px 15px;
      background: #f5f5f5;
      border-radius: 16px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 14px;
      
      &.active {
        background: #FFF5EB;
        color: $primary-color;
      }
    }
  }
  
  .price-range {
    display: flex;
    align-items: center;
    
    .price-input {
      flex: 1;
      height: 40px;
      background: #f5f5f5;
      border-radius: 8px;
      padding: 0 12px;
      font-size: 14px;
    }
    
    .price-separator {
      margin: 0 10px;
    }
  }
  
  .action-buttons {
    display: flex;
    margin-top: 30px;
    
    .reset-btn,
    .confirm-btn {
      flex: 1;
      height: 44px;
      border-radius: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
    }
    
    .reset-btn {
      background: #f5f5f5;
      margin-right: 15px;
    }
    
    .confirm-btn {
      background: $primary-color;
      color: #fff;
    }
  }
}
</style>